<template>
  <div id="farm">
    <Introduce>
      <template v-slot:title>
        选择一个农园
      </template>
      <template v-slot:msg>
        <p>
          通过提供流动性来获取珍珠代币.
        </p>
      </template>
    </Introduce>
    <div class="farm-item">
      <TokensItem :hint-show="false">
        <template v-slot:title>
          PEARL/TRX LP
        </template>
        <template v-slot:msg>
          存款 PEARL/TRX LP
        </template>
      </TokensItem>
      <TokensItem>
        <template v-slot:title>
          USDT 田园
        </template>
        <template v-slot:msg>
          存款 USDT
        </template>
      </TokensItem>
      <TokensItem>
        <template v-slot:title>
          TRX 丘陵
        </template>
        <template v-slot:msg>
          存款 TRX
        </template>
        <template v-slot:link>
          <a>
            即将推出
          </a>
        </template>
      </TokensItem>
      <TokensItem></TokensItem>
      <TokensItem></TokensItem>
      <TokensItem></TokensItem>
    </div>
  </div>
</template>

<script>
import Introduce from '@/components/introduce';
import TokensItem from '@/components/tokensItem';
export default {
  components: {
    Introduce,
    TokensItem,
  },
};
</script>

<style lang="scss" scoped>
#farm {
  width: 100%;
  // height: 100%;
  max-width: 1200px;
  margin: 0 auto;
  .farm-item {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding: 12px;
    & > div {
      margin: 0 10px;
      margin-bottom: 20px;
    }
  }
}
</style>
